import { delDevice, getDeviceTypeList } from '@/services/api/deviceType';
import { DeviceTypeResultItem } from '@/services/api/model/deviceTypeModel';
import { ActionType, PageContainer, ProList } from '@ant-design/pro-components';
import { Button, Card, Image, Popconfirm, Space, Tag, Typography } from 'antd';
import React, { useRef } from 'react';
import CreateForm from './components/CreateForm';
const DevicePage: React.FC = () => {
  const { Paragraph } = Typography;
  const onCancel = () => {};
  const actionRef = useRef<ActionType>();
  // 删除
  const handleConfirm = async (id: string) => {
    // 这里 return 一个 primise 之后会执行异步关闭 resolve(null) 之后关闭
    try {
      await delDevice(id);
      actionRef.current!.reloadAndRest!();
      Promise.resolve(null);
    } catch (error) {
      Promise.resolve(null);
    }
  };
  //提交
  const onSubmit = () => {
    // 重置到默认值，包括表单
    // 断言标识,reloadAndRest一定是存在的
    actionRef.current!.reloadAndRest!();
  };
  return (
    <PageContainer>
      <Card bodyStyle={{ padding: '10px' }}>
        <ProList<DeviceTypeResultItem>
          actionRef={actionRef}
          toolbar={{
            // 新建
            actions: [
              <CreateForm key={102938} onCancel={onCancel} onSubmit={onSubmit}></CreateForm>,
            ],
          }}
          request={async (
            // 第一个参数 params 查询表单和 params 参数的结合
            // 第一个参数中一定会有 pageSize 和  current ，这两个参数是 antd 的规范
            params,
          ) => {
            // 这里需要返回一个 Promise,在返回之前你可以进行数据转化
            // 如果需要转化参数可以在这里进行修改
            const msg = await getDeviceTypeList({
              // 这里传入数组之后,默认会有序列化的
              deviceTypeName: params.name,
              deviceTypeToken: params.token,
              page: params.current,
              pageSize: params.pageSize,
              includeDeviceType: true,
              includeAssignment: true,
              excludeAssigned: false,
            });
            return {
              data: msg.results,
              // success 请返回 true，
              // 不然 table 会停止解析数据，即使有数据
              success: true,
              // 不传会使用 data 的长度，如果是分页一定要传
              total: msg.numResults,
            };
          }}
          pagination={{
            defaultPageSize: 21,
            showSizeChanger: false,
          }}
          showActions="always"
          rowSelection={{}}
          grid={{ gutter: 16, column: 3 }}
          onItem={(record: any) => {
            return {
              onMouseEnter: () => {
                // console.log(record);
              },
              onClick: () => {
                console.log(record);
              },
            };
          }}
          search={{
            span: 6,
            filterType: 'light',
            // searchGutter: 2,
            // 搜索表单的样式
            style: {
              padding: 0,
            },
          }}
          metas={{
            actions: {
              // 操作栏 处于的位置 ,extra 顶部 actions 底部
              cardActionProps: 'actions',
              // 注意:所有的数组格式的 都要添加一个key
              render: (_, row) => [
                <CreateForm
                  key={'edit'}
                  trigger={
                    <Button style={{ flex: '1 1 0%' }} size="small" type="text">
                      编辑
                    </Button>
                  }
                  deviceTypeToken={row.token}
                  onCancel={onCancel}
                  onSubmit={onSubmit}
                  title="编辑"
                ></CreateForm>,
                <Button style={{ flex: '1 1 0%' }} size="small" type="text" key={'guanlian'}>
                  关联
                </Button>,
                <Button style={{ flex: '1 1 0%' }} size="small" type="text" key={'jinyong'}>
                  禁用
                </Button>,
                <Popconfirm
                  key={'del'}
                  title="确定删除吗"
                  onConfirm={() => handleConfirm(row.token!)}
                >
                  <Button style={{ flex: '1 1 0%' }} key={'del1'} danger size="small" type="text">
                    删除
                  </Button>
                </Popconfirm>,
              ],
              search: false,
            },
            subTitle: {
              search: false,
              render: () => {
                return (
                  <Space size={0}>
                    <Tag color="success">可用</Tag>
                    {/* <Tag color="#5BD8A6">TechUI</Tag> */}
                  </Space>
                );
              },
            },
            type: {
              search: false,
              // valueType: 'top',
            },
            content: {
              search: false,
              render: (_, row) => {
                return (
                  <div style={{ width: '100%' }}>
                    <div style={{ display: 'flex' }}>
                      <Image
                        width={90}
                        height={90}
                        src={IMG_URL + row.imageUrl}
                        fallback=""
                      />
                      <div
                        style={{
                          marginLeft: '10px',
                        }}
                      >
                        <div style={{ display: 'flex' }}>
                          Token:
                          <Paragraph copyable={{ tooltips: false }}>{row?.token}</Paragraph>
                        </div>
                        <div style={{ display: 'flex' }}>
                          描述:
                          {row?.description ? (
                            <Paragraph copyable={{ tooltips: false }}>{row?.description}</Paragraph>
                          ) : (
                            '--'
                          )}
                        </div>
                      </div>
                    </div>
                  </div>
                );
              },
            },
            title: {
              title: '名称',
              dataIndex: 'name',
              // render: (_, row) => {
              //   return <Tag color="processing">{row.name}</Tag>;
              // },
            },
            token: {
              title: 'Token',
              dataIndex: 'token',
            },
          }}
        />
      </Card>
    </PageContainer>
  );
};

export default DevicePage;
